<template>
  <div class="home">
    <div class="resume_box" :class="{ 'box-height': isOpen }">
      <div class="resume_head">
        <dl class="left_box" style="background-color: rgb(96, 122, 157);">
          <dt>个人简历</dt>
          <dd><span>Personal resume</span><p>我一直在努力成为更好的自己</p></dd>
        </dl>
      </div>
      {{list}}
      <div class="resume_content_all">
        <!-- <div class="resume_content">
          <div class="resume_content_main">
            <div class="module_tit" style="background-color: rgb(96, 122, 157);">基本信息</div>
            <div class="line_box2"></div>
            <div class="basic_info_box">
              <ul class="basic_info_list" style="font-size: 13px;">
                <li><span>姓　　名</span>： AI简历</li>
                <li><span>联系电话</span>： 15888888888</li>
              </ul>
              <div class="photo_box">
               
              </div>
            </div>
          </div>
        </div> -->
        <div class="resume_content" 
          v-for="(item, index) in list"
          :key="index"
          :id="item.id">
          
          <div class="resume_content_main" style="padding-top: 10px; padding-bottom: 6px;">
            <div class="module_tit" style="background-color: rgb(96, 122, 157);">{{item.name}}</div>
            <div class="line_box2"></div>
            <template v-if="item.idName === 'basicInfo'">
              <div class="basic_info_box">
                <ul class="basic_info_list" style="font-size: 13px;">
                  <li v-if="item.project && item.project.titleName"><span>姓　　名</span>： {{ item.project.titleName }}</li>
                  <li v-if="item.project && item.project.roleName"><span>联系电话</span>： {{item.project.roleName}}</li>
                  <li v-if="item.project && item.project.email"><span>邮　　箱</span>： {{item.project.email}}</li>
                  <li v-if="item.project && item.project.years"><span>工作年限</span>： {{item.project.years}}年</li>
                  <li v-if="item.project && item.project.school"><span>学　　校</span>： {{item.project.school}}</li>
                </ul>
              </div>
            </template>
            <template v-if="item.idName === 'jiaoyu'">
              <div class="content_list" style="margin-top: 10px">
                <ul class="list_top" style="color: rgb(96, 122, 157); font-size: 14px;">
                  <li>2010.09 ~ 2013.06</li>
                  <li class="name">无锡职业技术学院</li>
                  <li>电子信息与技术</li>
                  <li>大专学历</li>
                </ul>
              </div>
            </template>
            <template v-if="item.idName === 'jineng'">
              <div class="ql-editor" style="font-size: 13px; line-height: 1.7;" v-if="item.project && item.project.value">
                <ul v-html="item.project.value.value"></ul>
              </div>
            </template>
            <template v-if="item.idName !== 'jineng' && item.idName !== 'basicInfo'">
              <div class="content_list" style="margin-top: 10px" 
                v-for="(cons, idx) in item.project"
                :key="idx">
                <ul class="list_top" style="color: rgb(96, 122, 157); font-size: 14px;">
                  <li v-if="cons.time">{{cons.time}}</li>
                  <li class="name" v-if="cons.titleName">{{cons.titleName}}</li>
                  <li v-if="cons.roleName">{{cons.roleName}}</li>
                </ul>
                <div class="ql-editor" style="font-size: 13px; line-height: 1.7;">
                  <ul v-html="cons.content"></ul>
                </div>
              </div>  
            </template>
          </div>
        </div>
      </div>
    </div>
    <resume-editor  @input-action="workAction" @edit-show="editShowAction" :rList="list"></resume-editor>
    {{data}}
    <!-- <ul class="page_line">
      <li></li>
    </ul> -->
    <div class="print" @click="printAction"><span></span></div>
  </div>
</template>

<script>
import resumeEditor from '@/components/Editor';
import { ref, computed, onMounted, reactive, toRefs } from 'vue';
export default {
  setup() {
    const isOpen = ref(false);
    let resumeData = {
      list: [
        { name: '基本信息', idName: 'basicInfo' },
        {  name: '技能特长', idName: 'jineng' },
        { name: '工作经验', idName: 'work' },
        { name: '项目经历', idName: 'project' }
      ],
    };

    
    const data = reactive(resumeData);
    const hStyle = computed(() => {
      if (isOpen.value) {
        return {
          paddingBottom: '460px'
        };
      }
      return {};
    });
    const workAction = (res) => {
      // const { content, titleName, roleName, time } = res;
      // data.list = res
      if (res.type === 'basicInfo') {
        data.list[0].project = res;
      }
      else if (res.type === 'jineng') {
        data.list[1].idName = 'jineng';
        data.list[1].project = res;
      } else {
        const idName = res[0].idName;
        if(idName === 'work') {
          data.list[2].project = res;
        } else {
          data.list[3].project = res;
        }
      }
    };
    const printAction = () => {
      window.print();
    };

    const editShowAction = (value) => {
      console.log(value);
      isOpen.value = value;
    };

    const eidtSaveStorage = () => {
      window.localStorage.setItem('RESUME_DATA', JSON.stringify(data));
      window.setTimeout(() => {
        eidtSaveStorage()
      }, 3000);
    };

    onMounted(() => {
      let dr = window.localStorage.getItem('RESUME_DATA');
      if (dr) {
        dr = JSON.parse(dr);
        let { list } = dr;
        data.list = list;
        // data = Object.assign(data, dr);
      }
      eidtSaveStorage();
    });
    return { isOpen, hStyle, ...toRefs(data), workAction, printAction, editShowAction, eidtSaveStorage };
  },
  components: {
    resumeEditor,
  }
}
</script>

<style>
.home {
  width: 820px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 6px rgb(0 0 0 / 10%);
  box-shadow: 0 0 6px rgb(0 0 0 / 10%);
  position: relative;
  z-index: 1;
  margin: auto;
}
.resume_box {
  position: relative;
  padding-bottom: 10px;
  /* min-height: 1150px; */
  min-height: 100vh;
  color: #333;
  background-color: #fff;
}
.resume_head {
  padding: 10px 0 0;
  height: 66px;
}
.left_box {
  float: left;
  min-width: 56%;
  color: #fff;
  padding: 15px 40px;
  overflow: hidden;
  background-color: #607a9d;
  border-radius: 0 35px 35px 0;
}
.left_box dd {
  float: left;
  line-height: 18px;
  font-size: 18px;
  padding-left: 15px;
  font-size: 14px;
}
.left_box dl p {
  font-size: 12px;
  text-shadow: none;
}
.left_box dt {
  float: left;
  font-size: 32px;
  border-right: 1px solid #fff;
  height: 36px;
  line-height: 36px;
  padding-right: 15px;
}
.resume_content_all {
  padding-top: 5px;
  margin: 0px 30px 0px 40px;
  border-left: 2px solid #ddd;
}
.resume_content_all .resume_content {
  padding-top: 28px;
  position: relative;
  font-size: 14px;
}
.resume_content_all .resume_content_main {
    padding-top: 10px;
    padding-bottom: 6px;
    padding: 20px;
}
.resume_content_all .module_tit {
  position: absolute;
  left: -16px;
  top: 4px;
  min-width: 100px;
  padding: 0 30px;
  border-radius: 12px;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  font-weight: 700;
  background-color: #4e7282;
  color: #fff;
  white-space: nowrap;
  z-index: 2;
}
.basic_info_box {
  min-height: 102px;
  position: relative;
}
.basic_info_list {
  max-width: 580px;
  overflow: hidden;
}
.basic_info_list li {
  padding: 3px 0;
  float: left;
  width: 50%;
}
.basic_info_list li span {
  vertical-align: top;
  min-width: 60px;
  -moz-text-align-last: justify;
  text-align-last: justify;
  display: inline-block;
}
.resume_content .photo_box {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 3;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 108px;
  background-color: #fff;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
}
.resume_content .line_box2 {
  border-top: 2px solid #ddd;
  width: 100%;
  position: absolute;
  left: 0;
  top: 15px;
}
.resume_content .content_list .list_top {
  overflow: hidden;
  font-size: 14px;
}
.resume_content .content_list .list_top li {
  float: left;
  margin-right: 20px;
  line-height: 1.6;
  text-align: left;
  font-weight: 700;
}
.resume_content .content_list .list_top li:first-child {
  text-align: left;
  float: left;
  margin-left: 0;
  min-width: 160px;
}
.resume_content .content_list .list_top li.name {
  min-width: 220px;
  text-align: center;
  margin-left: 30px;
}
.resume_content .content_list .list_top li:last-child {
  min-width: inherit;
  margin-right: 0;
  float: right;
}
.resume_content .content_list .ql-editor {
  margin-top: 7px;
  color: #333;
  line-height: 1.62;
}
.ql-editor {
  box-sizing: border-box;
  line-height: 1.42;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 12px 15px;
  -o-tab-size: 4;
  tab-size: 4;
  -moz-tab-size: 4;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.page_line li {
  position: absolute;
  left: 0;
  top: 1150px;
  width: 100%;
  height: 18px;
  z-index: 2;
  font-size: 12px;
  background-color: #fff;
}
.print {
  color: #185abd;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 0 0 20px rgb(0 0 0 / 20%);
  position: fixed;
  /* left: 50%; */
  right: -50px;
  top: 50%;
  margin-top: -40px;
  z-index: 1;
  /* margin-left: -40px; */
  background-color: #fff;
  cursor: pointer;
  text-align: center;
  line-height: 80px;
  font-size: 18px;
}
.print span{
  opacity: 0;
}
.print:hover span {
  opacity: 1;
}
</style>

